|
| 今回は、JavaScriptを使ったブルダウンメニューの作り方を紹介します。 プルダウンメニューは、場所もそれほどとらないのでサイトのカテゴリー内でのナビゲーションなどに利用すると、ユーザーにとって親切です。 プルダウンメニューでリンク先を選択してジャンプする方法には、リンク先を選ぶと自動的にジャンプするものと、「Go」ボタンをクリックして移動するものとが一般的です。 どちらも構造的には同じで、<FORM>を利用して<OPTION>タグのVALUE属性にリンク先を記述します。関数menuLinkを呼び出すときに、「onChange」にするか「onClick」にするかと、<INPUT>タグを使ってボタンを指定するか、の違いです。 |
 |
 |
|
|
HTMLの中でJavaScriptを使うには、HEADタグにスクリプト言語として指定します。 プルダウンメニューでは、menuLink関数を呼び出すのでその機能(function)も記述します。 if(linkLoc !="")と記述するのは、ユーザーがプルダウンメニューを使わなかった場合を考慮しています。 <HTML> <HEAD> <TITLE>タイトル</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") { window.location.href=linkLoc;} } //--> </SCRIPT> </HEAD> |
||
|
 |
  |
|
FORMタグには、メニューの名前(省略可能)、SELECTタグ、OPTIONタグを記述します。 直接ジャンプする場合は、SELECT onChangeと記述します。 リンク先はOPTIONタグのVALUE属性に指定します。 <FORM> 目次... <SELECT onChange="menuLink(this.options[this.selectedIndex].value)"> <OPTION SELECTED>Select...</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> </FORM> |
※メニューからのリンクはダミーです。実際のリンクページはありません。 |
|
|
 |
|
|
「Go」ボタンを使ってジャンプするには、まず、FORMタグにフォームの名前を記述する必要があります。 次に、INPUTタグを使ってボタンの設定を行ないます。 INPUTタグには、TYPE属性、VALUE属性、クリックしたときにプルダウンメニューで選択したリンク先へジャンプするように記述します。 <FORM NAME="form1"> 目次... <SELECT NAME="linkMenu"> <OPTION SELECTED>Select...</OPTION> <OPTION VALUE="index.html">Home</OPTION> <OPTION VALUE="new.html">What's New</OPTION> <OPTION VALUE="gallery.html">Gallery</OPTION> <OPTION VALUE="diary.html">Diary</OPTION> <OPTION VALUE="map.html">Map</OPTION> <OPTION VALUE="profile.html">Profile</OPTION> </SELECT> <INPUT TYPE="button" VALUE="Go" onClick="menuLink(document.form1.linkMenu.options [ document.form1.linkMenu.selectedIndex ] .value)"> </FORM> |
※メニューからのリンクはダミーです。実際のリンクページはありません。 |
|
 |
|
うまくいきましたか? それでは、また次回をお楽しみに！ |